<!-- 过度
    transition:  属性  完成时间  过渡方式  延迟开始时间
 -->
<!-- 过度搭配
    .item .body {
    width: 0;
    height: 0px;
    background-color: lightgreen;
    transition: all 0.1s linear 0s;
    }
    
    .item:hover .body {
        width: 100px;
        height: 100px;
    }
 -->



<!-- 动画
    animation: 动画名  完成时间  效果  延迟开始时间  进行次数;
 -->
<!-- 动画搭配
    @keyframes cxk {
        /* 拉伸 */
            from{height: 0;}
            to{height: 100%;}


        /* 旋转 */
            0% {transform: rotate(0deg);}
            25% {transform: rotate(90deg);}
            50% {transform: rotate(180deg);}
            75% {transform: rotate(270deg);}
            100% {transform: rotate(360deg);}


        /* 平移 */
            box {transform: translate(xpx, ypx);}
        
        /* 缩放 */
            box {transform: scale(xpx, ypx);}
-->


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .item {
            width: 100px;
        }

        .item .title {
            height: 50px;
            background-color: lightblue;
            text-align: center;
            line-height: 50px;
        }

        .item .body {
            width: 0;
            height: 0px;
            background-color: lightgreen;
            transition: all 0.1s linear 0s;
        }

        .item:hover .body {
            width: 100px;
            height: 100px;
        }

        .circle {
            width: 200px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }

        .circle img {
            width: 100%;
            animation: cxk 1s linear 0.1s infinite;
            position: absolute;

        }


        @keyframes cxk {
            /* from {
                height: 0;

            }

            to {
                height: 100%;
            } */

            0% {
                transform: rotate(360deg) scale(1);

            }

            25% {
                transform: rotate(270deg) scale(0.5);
            }
            50% {
                transform: rotate(180deg) scale(1);

            }

            75% {
                transform: rotate(90deg) scale(0.5);
            }

            100% {
                transform: rotate(0deg) scale(1);
            }
        }
    </style>
</head>

<body>
    <div class="item">
        <div class="title">标题</div>
        <div class="body"></div>
    </div>



    <div class="circle">
        <img src="/素材/img/太极.jpg" alt="图片加载失败！">
    </div>
</body>

</html>